import Taro, { Component, Config } from '@tarojs/taro'
import { Button, Image, View } from '@tarojs/components'
import './index.scss'
import lodash from '@/utils/lodash'
import { ORDER_TYPE } from '@/config/types'
import { getQrCode, getOrderInfo } from "@/api/orderApi"
// import { couponInfoByOrderId } from "../../../api/userApi"
import { formatTime, makePhoneCall, openLocation } from "@/utils/utils"
import OrderVoucher from '@/components/order/order-voucher/index'
import { Loading, NavBar } from '@/components/index'


const filterOrderInfo = i => {
  const barCodeArr = lodash.chunk((i.showBarQrcode || '').split(''), 5).map(i => i.join(''))
  const orderInfo = {
    ...i,
    barCodeArr
  }
  const storeInfo = i.cooperateShopAddressSnap

  return { orderInfo, storeInfo, userInfo: i.userSnap }
}

export default class Index extends Component {
  state: any
  config: Config = {
    navigationStyle: 'custom'
  }
  static options = {
    addGlobalClass: true
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      userInfo: {},
      orderInfo: {},
      storeInfo: {},
      goodsInfo: {},
      couponInfo: {},
      coupons: [],
      qrCode: '',
      couponDetail: ''
    }
  }

  componentWillMount() {
    const {params} = this.$router
    this.getOrderInfo(params.id)
    // this.getOrderInfoa(params.id)
  }

  //  获取订单信息
  async getOrderInfo(id) {
    const codeRes = await getQrCode(id)
    await getOrderInfo(id).then(res => {
      const { orderInfo, storeInfo, userInfo }:any = filterOrderInfo({ ...res.data, qrCode: codeRes.data })
      this.setState({
        loading: false,
        orderInfo,
        storeInfo,
        userInfo,
      })
    })
  }

  // /**
  //  * 获取订单信息
  //  * @param id 订单id
  //  */
  // async getOrderInfoa(id) {
  //   const codeRes = await getQrCode(id)
  //   await couponInfoByOrderId(id).then(res => {
  //     const {data} = res
  //     const coupons = {}
  //     data.coupons.map(coupon => {
  //       coupon.qrCode = codeRes.data
  //       coupons[coupon.barQrcode] = coupon
  //     })
  //
  //     formatHtml(data.couponDetail)
  //     this.setState({
  //       goodsInfo: data.goodsInfo,
  //       storeInfo: data.storeInfo,
  //       couponInfo: data.coupon,
  //       coupons: data.coupons,
  //       couponDetail: formatHtml(data.coupon.couponDetail),
  //     })
  //   })
  // }

  //  导航
  openLocation(i) {
    openLocation(i.lat, i.lng, i.name, i.address)
  }

  //  拨号
  makePhoneCall(i) {
    makePhoneCall(i.phone)
  }

  render() {
    const { loading, userInfo, orderInfo, storeInfo } = this.state

    return (<View className='order-page'>
      {loading && <Loading/>}
      <NavBar isTitle>电子凭证</NavBar>
      <View className='order-scroll'>
        <View style='height: 88px;' />
        <View className='order-voucher-one'>
          <View className='coupon-card coupon-list'>
              <View className='list-item'>
                <View className='coupon-info'>
                  <View className='basis-info d-f a-i-c f-d-c j-c-b'>
                    <View className='goods-info'>
                      <View className='store-img'>
                        <Image src={storeInfo.logo} />
                      </View>
                      <View className='store-name f-s-30'>{storeInfo.shopName}</View>
                      <View className='store-detail f-s-24'>{storeInfo.detail}</View>
                    </View>
                    <View className='qr-code-info'>
                      <View className='verify-code d-f'>
                        <Image src={orderInfo.qrCode} />
                        {/*<View className='cover-img d-f a-i-c j-c-c'>*/}
                        {/*  <Image src='niubenben.oss-cn-shanghai.aliyuncs.com/platform-img/image/ended.png' />*/}
                        {/*</View>*/}
                      </View>
                      <View className='bar-code d-f bnn-number'>
                        {orderInfo.barCodeArr.map(code => {
                          return (<View key={code} className='code'>{code}</View>)
                        })}
                      </View>
                    </View>
                  </View>
                  <View className='segmentation d-f a-i-c'>
                    <View className='cut-off-rule' />
                  </View>
                  <View className='info-bottom d-f f-d-c a-i-c j-c-b'>
                    {orderInfo.status === ORDER_TYPE.UN_CHECK && <View className='verify-content d-f f-d-c j-c-c'>
                      <View className='verify-status f-s-24'>核销状态：未核销</View>
                      <View className='verify-time f-s-24'>核销时间：--</View>
                    </View>}
                    {orderInfo.status !== ORDER_TYPE.UN_CHECK && <View className='verify-content d-f f-d-c j-c-c'>
                      <View className='verify-status f-s-22'>核销状态：已核销</View>
                      <View className='verify-time f-s-22'>核销时间：2019-12-12 12:12</View>
                      <View className='verify-people f-s-22'>核销人员：输码核销</View>
                    </View>}
                    <Button className='verify-button xf-btn xf-btn-round xf-btn-primary f-s-28'>自助核销</Button>
                    {/*<View className='verify-button dashed d-f a-i-c j-c-c f-s-28'>自助核销</View>*/}
                  </View>
                </View>
              </View>
          </View>
        </View>
        <OrderVoucher storeInfo={storeInfo}/>
        <View className='order-card order-info'>
          <View className='card-head'>
            <View className='head-title'>订单支付</View>
          </View>
          <View className='card-body'>
            <View className='order-item'>
              <View className='order-label t-a-j'>订单编号</View>
              <View className='order-content'>：{orderInfo.id}</View>
            </View>
            <View className='order-item'>
              <View className='order-label t-a-j'>昵称</View>
              <View className='order-content'>：{userInfo.nickName}</View>
            </View>
            <View className='order-item'>
              <View className='order-label t-a-j'>手机号</View>
              <View className='order-content'>：{userInfo.telephone || ''}</View>
            </View>
            <View className='order-item'>
              <View className='order-label t-a-j'>支付时间</View>
              <View className='order-content'>：{formatTime(orderInfo.paidTime, 'YYYY-MM-DD HH:mm')}</View>
            </View>
          </View>
        </View>

        <View className='order-card store-info'>
          <View className='card-head'>
            <View className='head-title'>商家信息</View>
          </View>
          <View className='card-body'>
            <View className='store-item'>
              <View className='store-left'>营业时间：{storeInfo.businessTime}</View>
            </View>
            <View className='store-item'>
              <View className='store-left'>商家电话：{storeInfo.phone}</View>
              <View className='store-right store-btn' hoverClass='hover-class--btn' onClick={this.makePhoneCall.bind(this, storeInfo)}>拨号</View>
            </View>
            <View className='store-item'>
              <View className='store-left'>商家地址：{storeInfo.address}</View>
              <View className='store-right store-btn' hoverClass='hover-class--btn' onClick={this.openLocation.bind(this, storeInfo)}>导航</View>
            </View>
          </View>
        </View>

        {/*<View className='order-card'>*/}
        {/*  <View className='card-head'>*/}
        {/*    <View className='head-title'>注意事项</View>*/}
        {/*  </View>*/}
        {/*  <View className='card-body'>*/}
        {/*    <RichText nodes={couponDetail} />*/}
        {/*  </View>*/}
        {/*</View>*/}
      </View>
    </View>)
  }
}
